import { HTableColumns } from "@/components/ant-ext-table/HTable";
import { Form } from "antd";
import HDataTable from "@/components/ant-ext-table/HDataTable";
import {DeleteOutlined, PlusSquareOutlined} from "@ant-design/icons";
import CoopBank from "@/api/bank-list";
import CoopBankEdit from "@/pages/cooperativeBank/edit";
import HAction from "@/components/common/HAction";
import { HDataTableSlice } from "@/components/ant-ext-table/redux/dataTableSlice";
import { useDispatch } from "react-redux";
import { Dispatch } from "redux";

function getColumns(dispatch: Dispatch): HTableColumns<any> {
    return [
        {
            title: "id",
            dataIndex: 'id',
            width: '80px',
            fixed: 'left'
        }, {
            title: "银行名称",
            dataIndex: 'bankName',
        }, {
            title: "联系人",
            dataIndex: 'contacts',
        },  {
            title: "联系方式",
            dataIndex: 'contactsPhone',
        },{
            title: '操作',
            width: '150px',
            dataIndex: 'action',
            render: (_,record) => (
                <div >
                    <HAction type={"link"}
                                empower={CoopBank.EDIT}
                                invalid
                                action={() => dispatch!(HDataTableSlice.actions.doAction({
                                    action: CoopBank.EDIT,
                                    rowKey: CoopBank.RowKey,
                                    row: record
                                }))}
                                children={'修改'} />
                </div>
            ),
        },
    ]
}

export default function CooperativeBank() {
    const [form] = Form.useForm()
    const dispatch = useDispatch()
  
    return <>
        <CoopBankEdit />
        <div className="parent">
            <div className={"dataTable"}>
                <HDataTable
                     option={[
                        {key: CoopBank.ADD, title: "新增", icon: <PlusSquareOutlined/>},
                        {
                            key: CoopBank.DEL,
                            title: "删除",
                            // mode: "multi",
                            mode: "only",
                            icon: <DeleteOutlined style={{color: "red"}}/>,
                            confirm: "是否要删除所选数据",
                            action: (data) => {
                                CoopBank.delete({
                                    body: {id: data.selectRowKeys[0]},
                                    success: () => dispatch(HDataTableSlice.actions.setQueryParams({}))
                                })
                            }
                        },
                    ]}
                    unSort={true}
                    queryForm={{
                        form: form,
                        item: [
                            { name: "bankName", label: "银行名称" },
                            { name: "contactsPhone", label: "联系方式" }
                        ]
                    }}
                    columns={getColumns(dispatch)} selectMethod={CoopBank.selectTablePage}
                    rowKey={CoopBank.RowKey}
                />
            </div>
        </div>
    </>
}